/**
 * ...
 * @author Thot
 */
 
 
function Sample1()
{
	
	var SCREEN_W = document.getElementById("layer1").width >> 0;
	var SCREEN_H = document.getElementById("layer1").height >> 0;
	var _scope = this;
	var _renderer = null;
	var _lastTime = 0;
	var _fps = 0;
	var _imageLoader = null;
	var _counter = 0; 
	var _sprite = null;
	var _backgroundGroup = null;
	var _anim = null;
	
	
	// loop
	this.render 			= function()
	{
		var time = new Date().getTime();
		var elapsed = time - _lastTime;
		var time2 = 0;
		
		
		AnimationManager.getInstance().animateAll();
		
		_sprite.transformGroup.x++;
		_sprite.transformGroup.rotationY++;
		_sprite.transformGroup.rotationX++;
		_sprite.transformGroup.rotationZ++;
		_renderer.render();
		time2 = new Date().getTime() - time;
		_counter++;
		
		if( elapsed > 999 )
		{
			_fps = _counter;
			_lastTime = time;
			_counter = 0;
		}
		
		_renderer.layers[1].context.fillStyle = "black";
		_renderer.layers[1].context.fillRect( 0, 0, 300, 20 );
		_renderer.layers[1].context.fillStyle = "red";
		_renderer.layers[1].context.font = '15px sans-serif';
		_renderer.layers[1].context.fillText(_fps+"fps draw: "+_renderer.numDraws+" time: "+time2,10,15);
		
		window.requestAnimationFrame( _scope.render );
	};
	
	this.init 				= function()
	{
		var layer1 	= new Layer();
		var layer2 	= new Layer();
		var camera 	= new Camera();
		var assets 	= getAssetsLists();
		var max 	= assets.length;
		var i 		= 0;
		
		_renderer = new Renderer2D();
		
		//camera
		camera.x = 0;
		camera.y = 0;
		camera.z = 0;
		camera.width = SCREEN_W;
		camera.height = SCREEN_H;
		camera.pivotX = SCREEN_W * 0.5;
		camera.pivotY = SCREEN_H * 0.5;
		camera.pivotZ = 0;
		
		//layers
		layer1.displayList = new DisplayList();
		layer2.displayList = new DisplayList();
		
		layer1.canvas = document.getElementById("layer1");
		layer2.canvas = document.getElementById("layer2");
		
		layer1.context = layer1.canvas.getContext("2d");
		layer2.context = layer2.canvas.getContext("2d");
		
		layer1.sortFunc = Radix.sortByProperty;
		layer1.sortArgs = ["z"];
		
		layer1.name = "background";
		layer2.name = "front";
		
		layer1.lazy = true;
		
		//boost displayList
		
		var boost = new BSPTree();
		boost.init( 0, 0, 10000, 10000, 0, BSPTree.X_AXIS, null, 10, 100 );
		
		var boost = new SimpleCulling();
		boost.init();
		
		layer1.displayList.boost = boost;
		layer1.sorted = false;
		layer2.sorted = false;
		
		
		//render settings
		_renderer.camera = camera;
		_renderer.layers.push( layer1 );
		_renderer.layers.push( layer2 );
		
		
		
		//start loading assets
		_imageLoader = new ImageLoader();
		_imageLoader.signal.addListener(  ImageLoader.LOAD_COMPLETE, _scope.completeHandler, _scope );
		_imageLoader.signal.addListener(  ImageLoader.LOAD_PROGRESS, _scope.progressHandler, _scope );
		
		for( i = 0; i < max; i++ )
		{
			_imageLoader.addFile( assets[i], i );
		}
		
		_imageLoader.load();

		document.getElementById("zoom").onchange = _scope.inputHandler;
		document.getElementById("moveX").onchange = _scope.inputHandler;
		document.getElementById("moveY").onchange = _scope.inputHandler;
		document.getElementById("rotationX").onchange = _scope.inputHandler;
		document.getElementById("rotationY").onchange = _scope.inputHandler;
		document.getElementById("rotationZ").onchange = _scope.inputHandler;
		
	};
	
	this.inputHandler 		= function(event)
	{
		
		switch( event.target )
		{
				
			case document.getElementById("zoom"):
				_renderer.camera.zoom = ( ( event.target.value ) >> 0 ) * 0.01;
				break;
				
			case document.getElementById("moveX"):
				_renderer.camera.x = ( event.target.value ) >> 0;
				break;
				
			case document.getElementById("moveY"):
				_renderer.camera.y = ( event.target.value ) >> 0;
				break;
				
			case document.getElementById("rotationX"):
				_renderer.camera.rotationX = ( event.target.value ) >> 0;
				break;
				
			case document.getElementById("rotationY"):
				_renderer.camera.rotationY = ( event.target.value ) >> 0;
				break;
				
			case document.getElementById("rotationZ"):
				_renderer.camera.rotationZ = ( event.target.value ) >> 0;
				break;
		}
		
	};
	
	this.buildAnimations 	= function()
	{
		var frog = new Animation();
		frog.setFrame( 0, [0, 		0, 		0.25, 	0.25], 	4 );
		frog.setFrame( 1, [0.25, 	0.25, 	0.5, 	0.5	], 	4 );
		frog.setFrame( 2, [0.5, 	0.5, 	0.75, 	0.75], 	4 );
		frog.setFrame( 3, [0.75, 	0.75, 	1, 		1], 	4 );
		frog.setFrame( 4, [0, 		0, 		1, 		1], 	4 );
		AnimationManager.getInstance().registerAnimation( frog, "frog" );
		
		_anim = frog;
		_anim.sprite = _sprite;
		_anim.animationTime = 1000;
	};
	
	this.completeHandler 	= function()
	{
		var i = 0;
		var j = 0;
		var k = 0;
		var spr = null;
		var layer1 = _renderer.layers[0];
		var layer2 = _renderer.layers[1];
		var data = _imageLoader.getData();
		var prop = "";
		var i = 0;
		var texture = null;
		var group = _renderer.camera.transformGroup;
		
		
		
		
		
		i = 0;
		
		for( prop in data )
		{
			texture = new Texture2D();
			texture.id = i++;
			texture.data = data[prop];
			texture.url = "";
			texture.type = Texture2D.BMP_TEXTURE;
			TextureManager.getInstance().addTexture(texture);
		}
		
		texture = TextureManager.getInstance().getTextureById(0);
		
		for( i = 0; i < 100; i++ )
		{
			for( j = 0; j < 100; j++ )
			{
				
				spr = new Sprite();
				
				spr.textureId = texture.id;
				spr.sx = 0;
				spr.sy = 0;
				spr.sw = texture.data.width;
				spr.sh = texture.data.height;
				spr.x = j * 64;
				spr.y = i * 48;
				spr.z = 0;
				spr.width = 64;
				spr.height = 48;
				spr.name = "spr_back"+(k++);
				spr.transformGroup = group;
				
				layer1.displayList.addChild(spr);
			}
		}
		
		
		texture = TextureManager.getInstance().getTextureById(4);
		
		_sprite = new Sprite();
		_sprite.textureId = texture.id;
		
		
		_sprite.sx = 0;
		_sprite.sy = 0;
		_sprite.sw = texture.data.width; 
		_sprite.sh = texture.data.height; 
		
		_sprite.x = 100;
		_sprite.y = 100;
		_sprite.z = 0;
		_sprite.width = texture.data.width * 0.25;
		_sprite.height = texture.data.height * 0.25;
		
		_sprite.transformGroup = new TransformGroup();
		_sprite.transformGroup.pivotX = _sprite.x + _sprite.width * 0.5;
		_sprite.transformGroup.pivotY = _sprite.y + _sprite.height * 0.5;
		
		
		group.addSubGroup( _sprite.transformGroup );
		
		layer2.displayList.addChild( _sprite );
		
		_scope.buildAnimations();
		_scope.render();

	};
	
	this.progressHandler 	= function()
	{
		var layer = _renderer.layers[1];
		layer.context.clearRect(0,0,layer.canvas.width,layer.canvas.height);
		layer.context.fillStyle = "black";
		layer.context.fillText( _imageLoader.getProgression() + "%" , 100, 100 );
		//
	};
	
	this.init();
	
}

window.requestAnimationFrame = (function () {

  return window.requestAnimationFrame || //Chromium 
  window.webkitRequestAnimationFrame || //Webkit
  window.mozRequestAnimationFrame || //Mozilla Geko
  window.oRequestAnimationFrame || //Opera Presto
  window.msRequestAnimationFrame || //IE Trident?

  function (callback, element) { //Fallback function
    window.setTimeout(callback, 1);
  }
 
})();

window.onload = function () 
{ 
	new Sample1(); 
};